<template>
  <div class="container">
      <!-- <div class="header space-between padding-24">
          <div class="h-left"><img :src="news" alt=""><span></span></div>
          <div class="center">{{title}}</div>
          <div class="h-right"><img src="" alt=""></div>  
      </div> -->
      <Header :isEmail="isEmail" v-bind:title="title"></Header>
      <div class="user-info padding-24">
        <div class="info-nav space-between">
          <img :src="userinfo.user_avator || baseImg" alt="" @click="gotouserinfo">
          <div class="right flex-column">
            <div class="space-between">
              <div class="flex-end" style="font-size:18px;">
                <p class="color-f fs-38 nickName" style='width:150px;font-size:17px'>{{userinfo.nickname||'未登录'}}</p>
                <span class="fs-28 color-f" v-if="userinfo.is_vip==1" @click="gotomylevel">{{userinfo.level}}</span>
              </div>
              <div
                class="qd-btn bg-r color-f fs-32 center"
                v-if="this.userinfo != ''"
                @click.stop="gotosignin"
              >
                {{signIn === 1 ? '签到' : '已签到'}}
              </div>
            </div>
            <div class="vip center-col">
              <div class="color-f fs-24 center" v-if="userinfo.is_vip==2">{{userinfo.level}}</div>
              <div class="color-f fs-24 center" v-if="userinfo==''" @click="$router.push('/login')">登录</div>
              <div class="color-f fs-24 center" v-if="userinfo.is_vip==1">VIP</div>
              <div class="color-f fs-24 center" v-if="userinfo.is_singer==1">音乐人</div>
            </div>
          </div>
        </div>
        <div class="data-nav center-col">
          <div class="data-item after" @click="detail(1)">
            <p class="fs-36 color-f">{{userinfo.flower_number||0}}</p>
            <span class="fs-26 color-f">鲜花</span>
          </div>
          <div class="data-item after" @click="detail(2)">
            <p class="fs-36 color-f">{{userinfo.dynamic_number||0}}</p>
            <span class="fs-26 color-f">动态</span>
          </div>
          <!-- <router-link to="mydynamic" >
            
          </router-link> -->
          <div class="data-item after" @click="detail(3)">
            <p class="fs-36 color-f">{{userinfo.attention_number||0}}</p>
            <span class="fs-26 color-f">关注</span>
          </div>
          <!-- <router-link to="myattention" class="data-item after">
            
          </router-link> -->
          <div class="data-item" @click="detail(4)">
            <p class="fs-36 color-f">{{userinfo.fan_number||0}}</p>
            <span class="fs-26 color-f">粉丝</span>
          </div>
          <!-- <router-link to="myfansi" class="data-item">
            
          </router-link> -->
        </div>
      </div>
      <div class="content padding-24">
        <div class="content-top bg-f center-col">
          <div class="center after" @click="gotomyorder">
            <img :src="mall" alt="">
            <p class="fs-32">商城订单</p>
          </div>
          <div class="center" @click="gotovipcenter">
            <img :src="member" alt="">
            <p class="fs-32">会员中心</p>
          </div>
        </div>
        <div class="content-body bg-f flex wrap" >
          <div class="content-item" v-for="(item,index) in menulist" :key="index" @click="go(item)">
            <router-link :to="item.url" >
              <div class="logo center">
                <img :src="item.logo" alt="">
              </div>
              <p class="fs-32">{{item.title}}</p>
            </router-link>
          </div>
        </div>
        <div class="content-bottom bg-f center color-active fs-32" @click="logout">{{userinfo === ''? '登录' :'退出登录'}}</div>
      </div>
      <div class="logout center" v-if="logoutbtn" @touchmove.prevent>
          <div class="content">
              <div class="center">确定退出登录吗？</div>
              <div class="center-col">
                  <div class="center cancel" @click="cancel">取消</div>
                  <div class="center sure" @click="sure">确定</div>
              </div>
          </div>
      </div>
      <div class="logout center" v-if="noopen" @touchmove.prevent @click="noopen=false">
          <div class="content">
              <div class="center">功能暂未开通~</div>
          </div>
      </div>
      <Footer v-bind:titles="title"></Footer>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import Footer from '@/components/footer-nav'
export default {
  name: 'account',
  data () {
    return {
      title:'账号',
      signIn: 1,
      isEmail:true,
      logoutbtn:false,
      noopen:false,
      mall:require("../../assets/account/mall.png"),
      member:require("../../assets/account/member.png"),
      news:require("../../assets/account/news.png"),
      baseImg:require("../../assets/account/baseImg.png"),
      userinfo:'',
      menulist:[
        {
          title:'已购音乐',
          logo:require("../../assets/account/buy.png"),
          url:'mymusic'
        },
        {
          title:'我的福利券',
          logo:require("../../assets/account/welfare.png"),
          url:'mywelfare'
        },
        {
          title:'我的评论',
          logo:require("../../assets/account/comments.png"),
          url:'mycomments'
        },
        {
          title:'粉丝维权',
          logo:require("../../assets/account/fansi.png"),
          url:''
        },
        {
          title:'成为音乐人',
          logo:require("../../assets/account/musicmen.png"),
          url:'bemusicmen'
        },
        {
          title:'分享MET音乐',
          logo:require("../../assets/account/sharemusic.png"),
          url:''
        },
        {
          title:'设置',
          logo:require("../../assets/account/setting.png"),
          url:'setting'
        },
        {
          title:'关于',
          logo:require("../../assets/account/about.png"),
          url:'about'
        },
      ]
    }
  },
  components: {
    Footer,
   },
   created(){
    this.getuserinfo()
  },
  methods:{
    getuserinfo(){
      var url = this.$host1 + `home/getPersonalMsg`;
        this.$axios.get(url).then(res => {
        if (res.status == 200) {
          let resData = res.data;
          if (resData.code == 200) {
            this.userinfo=resData.data
          } else if(resData.code == 0){
            // this.$router.push('/login');
          }else{
            this.AlertWin(resData.message);
          }
        }
      }).catch(() => {
        this.AlertWin("网络错误！请稍后重试！");
      });
    },
    gotouserinfo(){
      if(this.userinfo == ''){
        this.AlertWin('请先去登录！');
        return 
      }
      this.$router.push({
          path: '/singerhome',
          query: {
              user_id: this.userinfo.user_id,
          }
      })
    },
    gotosignin(){
      this.$router.push('/signin')
    },
    gotomylevel(){
      this.$router.push('/mylevel')
    },
    cancel(){
        this.logoutbtn=false
    },
    sure(){
        var url = this.$host1 + `home/logout`
        this.$axios.post(url).then(res => {
        if (res.status == 200) {
          let resData = res.data;
          if (resData.code == 200) {
            this.logoutbtn=false;
            this.$router.push('/login')
          } else {
              this.AlertWin(resData.message);
          }
        }
        }).catch(() => {
        this.AlertWin("网络错误！请稍后重试！");
      });
        
    },
    logout(){
      if(this.userinfo == '') this.$router.push('/login')
      if(this.userinfo != '') this.logoutbtn=true
      //this.$router.push('/login')
      //window.location.href = `https://test.izhixiu.cn/www/met/musicstore/#/login?isback=1`; 
    },
    gotovipcenter(){
      if(this.userinfo == ''){
        this.$router.push('/login')
      }else{
        this.$router.push('/vipcenter')
      }
    },
    gotomyorder(){
      if(this.userinfo == ''){
        this.$router.push('/login')
      }else{
        window.location.href = 'https://test.izhixiu.cn/www/met/musicstore/#/myorder/1'
      }
    },
    go(i){
      if(i.url==''){
        this.noopen=true
      }
    },
    detail(type){
      if(this.userinfo === ''){
        this.$router.push('/login')
      }else{
        if(type===1) return 
        if(type===2) this.$router.push('mydynamic')
        if(type===3) this.$router.push('myattention')
        if(type===4) this.$router.push('myfansi')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  margin-bottom: 1.2rem;
  .user-info{
    width: 100%;
    height: 4.2rem;
    margin-top: 1rem;
    padding-top: 0.32rem;
    background: linear-gradient(to right,#680DAE,#9529C6);
    .info-nav{
      //background-color: red;
      width: 100%;
      height: 1.2rem;
      img{
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
      }
      .right{
        width: calc(100% - 1.4rem);
        height: 1.2rem;
        .flex-end{
          span{
            margin-left: 0.2rem;
          }
          .nickName{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .qd-btn{
          width:1.28rem;
          height:0.56rem;
          border-radius:0.28rem;
        }
        .vip{
          div{
            margin-right: 0.1rem;
            border-radius: 0.2rem;
            background-color: #ac6bd3;
            width: auto;
            padding: 0 0.2rem;
            box-sizing: border-box;
            height: 0.44rem;
          }
        }
      }
      
    }
    .data-nav{
      width: 100%;
      height: 1.2rem;
      margin-top: 0.6rem;
      //background-color: greenyellow;
      .data-item{
        text-align: center;
        position: relative;
        width: 25%;
        height: 100%;
        p{
          margin-bottom: 0.15rem;
        }
      }
      .after::after{
        content:'';
        width: 0;
        height: 0.32rem;
        position: absolute;
        right: 0;
        margin-top: -0.3rem;
        border-left:0.02rem solid #fff; 
      }
    }
  }
  .content{
    height: auto;
    margin-top: -0.73rem;
    .content-top{
      width:100%;
      height:1.68rem;
      border-radius:0.15rem;
      .center{
        position: relative;
        width: 50%;
        height: 0.88rem;
        img{
          width: 0.88rem;
          height: 0.88rem;
          border-radius: 50%;
        }
        p{
          font-weight: 800;
          margin-left: 0.2rem;
        }
      }
      .after::after{
        content:'';
        width: 0;
        height: 0.43rem;
        position: absolute;
        right: 0;
        //margin-top: -0.1rem;
        border-left:0.02rem solid #e9e9e9; 
      }
    }
    .content-body{
      padding: 0.24rem 0;
      box-sizing: border-box;
      width:100%;
      height:5.8rem;
      margin-top: 0.2rem;
      border-radius:0.15rem;
      .content-item{
        width: 33%;
        margin-top: 0.2rem;
        height: 1.5rem;
        //background-color: greenyellow;
        a{
          margin: 0 auto;
          width: 90%;
          height: 100%;
          display: block;
          //background-color: #9529C6;
          text-align: center;
          .logo{
            margin: 0 auto 0.1rem;
            width:0.96rem;
            height:0.96rem;
            background:#f5f0f7;
            border-radius:50%;
            img{
              width: 0.5rem;
              height: 0.5rem;
            }
          }
        }
      }
    }
    .content-bottom{
      width:100%;
      height:0.9rem;
      font-weight: 800;
      margin-top:0.5rem;
      border-radius:0.06rem;
    }
    
  }
}
</style>